﻿<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hui.css-H.js</title>
    <link rel="stylesheet" type="text/css" href="../../../css/Hui.css" />
    <style type="text/css">
        html, body { background: rgba(0,0,0,0.1); position: relative; }
        .menu-area { position: absolute; top: 0; right: 0.4rem; z-index: 100; -webkit-animation: scalebig 0.2s linear; -webkit-transform-origin: 12rem 0; }
        .list { width: 12rem; background: #fff; margin-top: 0.7rem; border-radius: 0.5rem; -webkit-border-radius: 0.5rem; padding: 0.5rem 0; }
        .list ul li { height: 3.6rem; line-height: 3.6rem; padding: 0 1rem; font-size: 1.4rem; }
        .list ul li:active { background: #f4f4f4; }
        .list ul li span { display: inline-block; vertical-align: middle; margin-right: 1rem; }
        .list ul li span i { font-size: 1.6rem; }
        .jiao { display: block; height: 0; width: 0; border-width: 0.9rem; border-style: solid; border-color: transparent transparent #fff transparent; position: absolute; top: -0.9rem; right: 0.9rem; z-index: 30; }
        /*变大*/
        @keyframes scalebig {
            from { opacity: 0 transform : scale(0); -webkit-transform: scale(0); }
            to { opacity: 1; transform: scale(1); -webkit-transform: scale(1); }
        }

        @-webkit-keyframes scalebig {
            from { opacity: 0; transform: scale(0); -webkit-transform: scale(0); }
            to { opacity: 1; transform: scale(1); -webkit-transform: scale(1); }
        }
        /*变小*/
        @keyframes scalesmall {
            from { opacity: 1; transform: scale(1); -webkit-transform: scale(1); }
            to { opacity: 0; transform: scale(0); -webkit-transform: scale(0); }
        }

        @-webkit-keyframes scalesmall {
            from { opacity: 1; transform: scale(1); -webkit-transform: scale(1); }
            to { opacity: 0; transform: scale(0); -webkit-transform: scale(0); }
        }
    </style>
</head>
<body>
    <div class="menu-area">
        <div class="jiao"></div>
        <div class="list">
            <ul>
                <li>
                    <span><i class="Hui-iconfont Hui-shixin" style="color:#00a5e0;"></i></span><label>下拉菜单一</label>
                </li>
                <li>
                    <span><i class="Hui-iconfont Hui-shixin" style="color:#fda960;"></i></span><label>下拉菜单二</label>
                </li>
                <li>
                    <span><i class="Hui-iconfont Hui-shixin" style="color:#529fff;"></i></span><label>下拉菜单三</label>
                </li>
                <li>
                    <span><i class="Hui-iconfont Hui-shixin" style="color:#fc747a;"></i></span><label>下拉菜单四</label>
                </li>
            </ul>
        </div>
    </div>
    <script type="text/javascript" src="../../../script/H.js"></script>
    <script type="text/javascript">
        function closeFrame() {
            H.D(".menu-area").style.cssText = "-webkit-animation: scalesmall 0.2s linear";
            setTimeout(function () {
                H.closeFrame();
            }, 200);
        }
        window.onload = function () {
            document.body.onclick = function (e) {
                var evt = event || window.event;
                var src = evt.target || evt.srcElement;
                if (src.tagName.toLowerCase() == "body") {
                    closeFrame();
                }
            }
        }
    </script>
</body>
</html>